<template>
	<view class="goods">
		<view class='list'>
			<view class='f-c-sb title'>
				<view class='title_text'>优惠券类型</view>
			</view>
			<view class="f-c-sb tag">
				<view 
					class="tabTag"
					v-for="(item, index) in type" 
					:key="index"
					:class="item.id == selType?'active':''"
					@click="selectType(item.id)"
				>{{item.name}}</view>
			</view>
			<view class='scope'>
				<u-radio-group v-model="scope">
					<u-radio
              shape='square'
              @change="radioChange"
              name="1"
              @tap="useAreaRadioChange(1)"
              active-color='#007FFF'
          >全场通用
          </u-radio>
          <u-radio
              shape='square'
              @change="radioChange"
              name="2"
              @tap="useAreaRadioChange(2)"
              active-color='#007FFF'
          >{{ useAreaTxt || '指定服务项目' }}
          </u-radio>
				</u-radio-group>
			</view>
		</view>
    <view v-if='scope == 2' class='goodsList'>
      <view v-if='selType == 4'>
        <view v-for='(item,index) in selectList' :key='index' class='coupon f-c-sb formBox'>
          <view>
            <view class='name'>商品名称：{{ item.goodsServerName }}</view>
            <view class='f-c-sb'>
              <view>库存：{{ item.surplusNumber }}</view>
              <view>使用方式：{{ item.useWayStr }}</view>
            </view>
            <view>商品售价：{{ item.costPrice }}/元</view>
          </view>
        </view>
      </view>
      <view v-else-if="selType == 6">
        <view v-for='(item,index) in selectList' :key='index' class="item boxShadow formBox">
          <view class="item-title">
            品牌/车系：{{ item.brandName }}-{{ item.seriesName }}-{{ index }}
          </view>
          <view class="car">车型：{{ item.modelName }}</view>
        </view>
      </view>
      <view v-else>
        <view v-for='(item,index) in selectList' :key='index' class="item boxShadow formBox">
          <view class="item-title">
            工项名称：{{ item.name }}
          </view>
          <view class="pric">标准工时费：{{ item.standardFee }}</view>
          <view class="storeName">门店名称：{{ item.storeBasicName }}</view>
        </view>
      </view>

    </view>
		<view class='submitBtn' @click='back'>确定</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: [
				{ id: 1, name: '钣喷满减' },
				{ id: 2, name: '洗车满减' },
				{ id: 3, name: '保养满减' },
				{ id: 4, name: '商城满减' },
				{ id: 5, name: '美容满减' },
				{ id: 6, name: '购车满减' },
			],
			selType:'1',
			useArea:[
				{
					id:1,
					name: '全场通用',
					checked: true
				},
				{
					id:2,
					name: '指定服务项目',
					checked: false
				},
			],
			scope:'1',
			pagelist:'',
			selectList:[],
			useAreaTxt:'',
			shopArray:[],
		}
	},
	onLoad(options){
		this.pagelist = options.index;
		var viewData = JSON.parse(options.data);
		this.shopArray = viewData.goodsVal || []
		this.selType = (viewData.type || {}).id || '1'
		this.scope = viewData.scope || '1'
		this.selectList = viewData.selectList || []
	},
	onShow() {
		if(this.selectList.length){
			return
		}
		let shopArray=[];
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];
		this.selectList=currPage.data.selectList;
		console.log(this.selectList)
		if(this.selectList.length){
			if(this.selType==1 || this.selType==2 || this.selType==3 || this.selType==5){
				this.selectList.forEach((val,index)=>{
					shopArray.push(val.optionNo);
				})
				this.useAreaTxt="已选中"+shopArray.length+"项服务";
				
			}else if(this.selType==6){
				this.selectList.forEach((val,index)=>{
					shopArray.push(val.modelId);
				})
				this.useAreaTxt="已选中"+shopArray.length+"辆车型";
				
			}else{
				this.selectList.forEach((val,index)=>{
					shopArray.push(val.gsId);
				})
				this.useAreaTxt="已选中"+shopArray.length+"个商品";
				
			}
			this.shopArray = shopArray
		}
	},
	methods: {
		selectType(id){
			this.selType = id;
			this.selectList = []
      this.useAreaTxt = ''
      this.scope = 1
			// if (this.scope == 2) {
			// 	this.selectList = []
      // 	if (this.selType == 4) {
      // 		this.$navigateTo('/pages/selectShop/selectShop', {});
      // 	} else if (this.selType == 1 || this.selType == 2 || this.selType == 3 || this.selType == 5) {
      // 		this.$navigateTo('/marketing/coupons/selectWorkItem', {type: this.selType});
      // 	} else {
      // 		this.$navigateTo('/marketing/coupons/selectCar', {});
      // 	}
      // }
    },
    radioChange(e) {
      console.log(e)
      // this.scope = e
      // if (this.scope == 2) {
      // 	this.selectList = []
      // 	if (this.selType == 4) {
      // 		this.$navigateTo('/pages/selectShop/selectShop', {});
      // 	} else if (this.selType == 1 || this.selType == 2 || this.selType == 3 || this.selType == 5) {
      // 		this.$navigateTo('./selectWorkItem', {type: this.selType});
      // 	} else {
      // 		this.$navigateTo('./selectCar', {});
      // 	}
      // }
    },
    useAreaRadioChange(id) {
      this.scope = id
      if (this.scope == 2) {
        this.selectList = []
        if (this.selType == 4) {
          this.$navigateTo('/pages/selectShop/selectShop', {});
        } else if (this.selType == 1 || this.selType == 2 || this.selType == 3 || this.selType == 5) {
          this.$navigateTo('./selectWorkItem', {type: this.selType});
        } else {
          this.$navigateTo('./selectCar', {});
        }
      }
    },
    back() {
      if (this.scope == 2 && !this.selectList.length) {
        uni.showToast({
          title: '请至少选择一件商品',
          icon: 'none',
        })
        return
      }
      var type = this.type.find(item => item.id == this.selType)
      uni.$emit('setCardData', {
				type:type,  //类型
				scope:this.scope,  //全场通用 or 指定服务项
				selectList:this.selectList,  //全部数据
				goodsVal:this.shopArray.join(','),  //id value
				pagelist:this.pagelist   //索引  第几个商品
			})
			uni.navigateBack({
				delta: 1
			});
		}
	},
}
</script>

<style lang="less">
	.list{
		background-color: #fff;
		padding:13rpx 40rpx;
		margin:13rpx 22rpx;
		.title{
			font-size: 24rpx;
			line-height: 90rpx;
			.title_text{
				position: relative;
			}
			.title_text:after{
				position: absolute;
				width: 8rpx;
				top:30rpx;
				height: 32rpx;
				content: "";
				left: -20rpx;
				border-radius: 20rpx;
				background-color: #007FFF;
			}
		}
		.tag{
			padding:20rpx 0;
			border-bottom: 1px solid #efefef;
			flex-wrap: wrap;
			.tabTag{
				width: 180rpx;
				height: 70rpx;
				background-color: #d3d3d3;
				color:#fff;
				text-align: center;
				line-height: 70rpx;
				margin-bottom: 20rpx;
				border-radius: 5rpx;
			}
			.active{
				background-color: #177fff;
			}
		}
	}
	.goodsList{
		padding:13rpx 40rpx;
		.coupon{
			background-color: #fff;
			padding:20rpx;
			line-height: 60rpx;
			margin-top:20rpx;
			border-radius: 20rpx;
			color:#C0C4CB;
			>view:first-child{
				flex:1;
				margin-right:100rpx;
			}
			.name{
				font-size:34rpx;
				color:#333;
			}
		}
	}
.submitBtn{
	width: 710rpx;
	height: 100rpx;
	background: #177fff;
	border-radius: 13rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	line-height: 100rpx;
	margin: 20rpx auto;
}
.goodsList {
		.item {
			position:relative;
			width: 660rpx;
			background: #ffffff;
			border-radius: 18rpx;
			margin: 23rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
			.color {
				width: 110rpx;
				height: 36rpx;
				opacity: 1;
				background: #177fff;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 36rpx;
				margin-right: 18rpx;
				&.color1 {
					background: #177fff;
				}
				&.color2 {
					background: #ff6738;
				}
				&.color3 {
					background: #f54170;
				}
				&.color4 {
					background: #2db2ad;
				}
			}
		}
		.item-title {
			font-size: 32rpx;
			color: #444;
			line-height: 70rpx;
		}
		.car{
			font-size: 28rpx;
			color: #666;
			line-height: 60rpx;
		}
		.info {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			line-height: 36rpx;
		}
		.checkbox{
			position:absolute;
			right:10rpx;
			top:50%;
			transform: translateY(-50%);
		}
	}
.goodsList {
		.item {
			position:relative;
			width: 660rpx;
			background: #ffffff;
			border-radius: 18rpx;
			margin: 23rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
			.color {
				width: 110rpx;
				height: 36rpx;
				opacity: 1;
				background: #177fff;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 36rpx;
				margin-right: 18rpx;
				&.color1 {
					background: #177fff;
				}
				&.color2 {
					background: #ff6738;
				}
				&.color3 {
					background: #f54170;
				}
				&.color4 {
					background: #2db2ad;
				}
			}
		}
		.item-title {
			font-size: 32rpx;
			color: #444;
			line-height: 70rpx;
		}
		.pric,.storeName{
			font-size: 28rpx;
			color: #666;
			line-height: 60rpx;
		}
		.info {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			line-height: 36rpx;
		}
		.checkbox{
			position:absolute;
			right:10rpx;
			top:50%;
			transform: translateY(-50%);
		}
	}
</style>
